<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import * as echarts from "echarts";

const place = ref()
const data = ref([
  {
    time: "8:00 ~ 9:00",
    num: "89/1000",
  },
  {
    time: "9:00 ~ 10:00",
    num: "211/1000",
  },
  {
    time: "10:00 ~ 11:00",
    num: "876/1000",
  },
  {
    time: "11:00 ~ 12:00",
    num: "341/1000",
  },
  {
    time: "14:00 ~ 15:00",
    num: "192/1000",
  },
  {
    time: "15:00 ~ 16:00",
    num: "176/1000",
  },
  {
    time: "16:00 ~ 17:00",
    num: "543/1000",
  }
])
const initTitle = () => {
  let titleEcharts = echarts.init(document.getElementById("header"));
  let option = {
    graphic: {
      elements: [
        {
          type: "text",
          top: "center",
          left: "center",
          style: {
            text: "核算预约",
            font: "BYForviC3.00",
            fontSize: 25,
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: "#e4e4e4",
            stroke: "#4264c0",
            lineWidth: 1,
          },
          keyframeAnimation: {
            duration: 2000,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: "transparent",
                  lineDashOffset: 200,
                  lineDash: [200, 0],
                },
              },
              {
                percent: 0.8,
                style: {
                  fill: "#ffc048",
                },
              },
              {
                percent: 1,
                style: {
                  fill: "#333",
                  // fill: "white"
                },
              },
            ],
          },
        },
      ],
    },
  };
  titleEcharts.setOption(option);
}
onMounted(() => {
  initTitle()
})
</script>

<template>
  <div id="layout">
    <div id="header" style="height: 50px;display: flex;justify-content: center;align-items: center;"></div>
    <el-divider style="margin: 0;" />
    <div id="contain">
      <el-radio-group v-model="place">
        <el-radio label="large">尤洛卡</el-radio>
        <el-radio>钟楼</el-radio>
        <el-radio label="small">大活中心</el-radio>
      </el-radio-group>

      <el-descriptions class="margin-top" :column="3" :size="small" direction="vertical" border
        style="width: 100%;margin-top: 15px;" v-for="item in data">
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Clock />
              </el-icon>
              时间段
            </div>
          </template>
          {{ item.time }}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon>
                <UserFilled />
              </el-icon>
              已选人数
            </div>
          </template>
          {{ item.num }}
        </el-descriptions-item>
        <el-descriptions-item width="120px" align="center">
          <template #label>
            <div class="cell-item">
              <el-icon>
                <Edit />
              </el-icon>
              操作
            </div>
          </template>
          <el-button :type="item.time == '10:00 ~ 11:00' ? 'danger' : 'primary'" size="small">{{item.time == '10:00 ~ 11:00' ? '取消选择' : '选择'}}</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<style lang='less'>
#layout {
  width: 100%;

  #contain {
    display: flex;
    flex-direction: column;
  }
}
</style>